<template>
    <section class="team-container">
      <h2 class="section-title">团队成员分工</h2>
      
      <!-- 团队成员表格 -->
      <table class="team-table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>分工</th>
            <th>负责模块</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="member in teamMembers" :key="member.id">
            <td>{{ member.name }}</td>
            <td>{{ member.role }}</td>
            <td>{{ member.modules }}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </template>
  
  <script setup>
  import { reactive } from 'vue'
  
  // 团队成员数据 - 使用 reactive
  const teamMembers = reactive([
    { id: 1, name: '彭世鑫', role: '项目经理', modules: '项目统筹、需求分析' },
    { id: 2, name: '周靖', role: '前端开发', modules: '用户界面、交互设计' },
    { id: 3, name: '罗可涵', role: '后端开发', modules: '数据库设计、API开发' },
  ])
  </script>
  
  <style scoped>
  /* 团队容器样式 */
  .team-container {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 标题样式 */
  .section-title {
    color: #3498db;
    margin-bottom: 15px;
  }
  
  /* 表格样式 */
  .team-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
  }
  
  .team-table th, .team-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  
  .team-table th {
    background-color: #e8f4fc;
    color: #2c3e50;
    font-weight: bold;
  }
  
  .team-table tbody tr:hover {
    background-color: #f0f7ff;
  }
  
  /* 响应式表格 */
  @media (max-width: 768px) {
    .team-table {
      display: block;
      overflow-x: auto;
    }
  }
  </style>